<template>
  <!-- Banner -->
  <div class="banner">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
      <van-swipe-item v-for="(item, index) in banner_list" :key="index">
        <div class="banner_wrapper">
          <router-link :to="item.path"><img :src="item.src" :alt="item.desc" /></router-link>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "Banner",
  props: {
    //banner_list: Array, //banner数据
  },
  data(){
    return{
      banner_list: [
        {
          src:
            "https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
          desc: "1",
          path: "ClusterList",
        },
        {
          src:
            "https://images.pexels.com/photos/847393/pexels-photo-847393.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
          desc: "2",
          path: "ClusterList",
        },
        {
          src:
            "https://images.pexels.com/photos/934718/pexels-photo-934718.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
          desc: "3",
          path: "ClusterList",
        },
      ],
    }
  }
};
</script>

<style scoped>
.banner_wrapper {
  width: 100%;
  height: 40vw;
  overflow: hidden;
}
.banner_wrapper img {
  transform: translateY(-15%);
}
</style>
